<template>
  <div id="complainDetail">
    <van-nav-bar class="header"
                 fixed
                 @click-left="goback"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">投诉详情</div>
    </van-nav-bar>
    <div class="main">
      <!-- 对象 -->
      <person-card :byUserid="byUserid"
                   @show_preview="show_preview(0)"
                   :byUseridUrl="byUseridUrl"></person-card>
      <!-- 原因 -->
      <reason-card :reason="reason"></reason-card>
      <!-- 凭证 -->
      <voucher-card v-if="imgList.length>0"
                    @show_preview="show_preview1"
                    :imgList="imgList"></voucher-card>
      <!-- 内容 -->
      <content-card :content="content"></content-card>
      <div class="btn bgprimary wordsWrite fz5"
           @click="go_appeal">申诉</div>
    </div>
  </div>
</template>
<script>
import personCard from "@/components/performance/orderCenter/complaintDetail/personCard";
import reasonCard from "@/components/performance/orderCenter/complaintDetail/reasonCard";
import voucherCard from "@/components/performance/orderCenter/complaintDetail/voucherCard";
import contentCard from "@/components/performance/orderCenter/complaintDetail/contentCard";
import { getuserUid } from "@/utils/auth";
export default {
  data() {
    return {
      byUseridUrl: "",
      byUserid: "",
      reason: "",
      uid: "",
      imgList: [],
      orderUid: this.$route.params.uid,
      orderName: this.$route.params.orderName,
      orderCode: "", //订单编号
      content: "",
      showPreview: false,
      images: [],
      index: 0
    };
  },
  mounted() {
    this.get_complaint();
  },
  methods: {
    show_preview(index) {
      this.images = [];
      this.images.push(this.byUseridUrl);
      this.showPreview = true;
      this.index = index;
    },
    show_preview1(index) {
      this.images = [];
      for (let i of this.imgList) {
        this.images.push(i.imageUrl);
      }
      this.showPreview = true;
      this.index = index;
    },
    onChange(index) {
      this.index = index;
    },
    //获取投诉详情
    async get_complaint() {
      //订单id 暂定
      const e = await HTTP("selectComplaintInfoByUid", {
        userUid: getuserUid(),
        orderUid: this.orderUid
      });
      if (e.code == 200) {
        this.reason = e.data.complaintInfo.reason;
        this.byUserid = e.data.complaintInfo.byUserid;
        this.byUseridUrl = e.data.complaintInfo.byUseridUrl;
        this.content = e.data.complaintInfo.content;
        this.imgList = e.data.list;
        this.uid = e.data.complaintInfo.uid;
        this.orderCode = e.data.complaintInfo.orderCode;
      } else {
        this.$toast(e.msg || "服务器异常");
      }
    },
    goback() {
      this.$router.push("/performance/orderCenter");
    },
    go_appeal() {
      this.$router.push({
        name: "performance-appeal",
        params: {
          orderUid: this.orderUid,
          complaintUid: this.uid,
          orderName: this.orderName,
          orderCode: this.orderCode
        }
      });
    }
  },
  components: {
    personCard,
    reasonCard,
    voucherCard,
    contentCard
  }
};
</script>
<style lang="scss" scoped>
#complainDetail {
  .header {
    background: $color-primary;
    color: #ffffff;
    height: 0.92rem;
    .title {
      color: #ffffff;
    }
  }
  .main {
    margin-top: 0.92rem;
    padding: 0.2rem 0.24rem 0 0.24rem;
    .btn {
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 10px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 0.4rem;
    }
  }
}
</style>
